<template>
	<view class="container">
		<view class="nav">
			<block v-for="item in navList" :key="item.id">
				<view class="item" :class="{'nav-active':navId==item.id}" :data-id="item.id" @click="chooseNav">
					{{item.title}}
				</view>
			</block>
		</view>
		
		<view class="content">
			<view class="user" v-if="cloneVoiceList.length != 0">
				<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx;">
					<text style="font-size: 35rpx; font-weight: bold;">克隆声音:</text>
					<view style="line-height: 60rpx; color: #d4237a; text-align: center; border-radius: 10rpx; height: 60rpx;width: 200rpx;border: 1rpx solid #d4237a;" @click="deleteClone">
						克隆声音源
					</view>
				</view>
				<view class="user-header" v-for="(item,index) in cloneVoiceList" :key="index">
					<view class="left">
						<image src="../../static/images/play.png" style="height: 80rpx;width:80rpx;" :data-url="item.voicePath" @click="playMusic"></image>
						<view style="margin-left: 12rpx;">
							<view style="font-size: 34rpx;color: #333;margin-bottom: 10rpx;">
								{{item.voiceName}}
							</view>
						</view>
					</view>
					<view class="right" @click="sure(item)">
						使用
					</view>
				</view>
			</view>
			<view class="user" v-else>
				<view style="display: flex; align-items: center; justify-content: space-around;">
					<text style="font-size: 35rpx; font-weight: bold;">克隆声音: 暂无~</text>
					<view style="margin-left: 20rpx; height: 80rpx; width: 150rpx; background-color: rgb(212, 35, 122); line-height: 80rpx; text-align: center; border-radius: 20rpx;" @click="gotoClone">前往克隆</view>
				</view>
			</view>
			
			<block v-for="item in voiceList" :key="item.id">
				<view class="user">
					<view class="user-header">
						<view class="left">
							<image src="../../static/images/play.png" style="height: 80rpx;width:80rpx;" :data-url="item.audioUrl" @click="playMusic"></image>
							<view style="margin-left: 12rpx;">
								<view style="font-size: 34rpx;color: #333;margin-bottom: 10rpx;">
									{{item.username}}
								</view>
								<view style="font-size: 26rpx;color: #666;">
									{{item.subDesc}}
								</view>
							</view>
						</view>
						<view class="right" @click="sure(item)">
							使用
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import Http from '../../utils/http'
const http = new Http()
var audioObj = uni.createInnerAudioContext({
	  useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
	})
	export default {
		data() {
			return {
				navId:1,
				navList:[],
				voiceList:[],
				isPay:false,
				cloneVoiceList:[],
			}
		},
		async onLoad() {
			let res = await http.get("v1/voice/getClassifyList")
			this.navId = res.data.data[0].id
			this.getVoiceListByClassifyId(res.data.data[0].id)
			this.navList = res.data.data
			this.getVoice();
		},
		methods: {
			gotoClone(){
				uni.navigateTo({
					url:'/subpkg/mkvideo/cloneVoice'
				})
			},
			getVoice(){
				http.get('v1/myvoice/'+1).then(res=>{
					console.log(res.data);
					this.cloneVoiceList = res.data.data;
				})
			},
			playMusic(e){
				console.log(e.currentTarget.dataset);
				var audioUrl = e.currentTarget.dataset.url
				audioObj.src = audioUrl
				audioObj.play() // 播放
			},
			deleteClone(){
				uni.navigateTo({
					url:'/subpkg/mkvideo/cloneVoiceList'
				})
			},
			stop() {
				audioObj.stop()
			},
			chooseNav(e){
				console.log("======",e);
				let id = e.currentTarget.dataset.id
				console.log("===",id);
				this.navId = id
				this.getVoiceListByClassifyId(id)
			},
			async getVoiceListByClassifyId(classifyId){
				let res = await http.get("v1/voice/getVoiceListByClassifyId?classifyId="+classifyId)
				this.voiceList = res.data.data
			},
			sure(item){
				if(item.voicePath){
					item.voice = item.voicePath;
				}
				var pages = getCurrentPages()
				let prePage = pages[pages.length-2]
				prePage.$vm._data.peiyinyuanForm = item
				prePage.$vm._data.form.peiyinyuan = item.voice
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #f1f1f1;
	}
.nav{
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #fff;
	padding: 0 20rpx;
	.item{
		// width:100rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		// border-bottom: 1rpx solid #fff;
		text-align: center;
	}
}

.content{
	margin-top: 130rpx;
	.user{
		display: flex;
		flex-direction: column;
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		.user-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.name{
					font-size: 32rpx;
					margin-left: 15rpx;
				}
			}
			.right{
				font-size: 28rpx;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border: 1rpx solid #d4237a;
				border-radius: 10rpx;
				color: #d4237a;
			}
			
		}
	.item-footer{
		display: flex;
		flex-wrap: wrap;
		background: #f1f1f1;
		padding: 20rpx;
		margin-top: 20rpx;
		.classify{
			padding: 6rpx 16rpx;
			border:1rpx solid #666;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			color: #333;
			border-radius: 10rpx;
		}
	}
	}
}
.nav-active{
	color: #d4237a;
	border-bottom: 1rpx solid #d4237a;
}
</style>
